<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
		<script>
			$(function(){
				var $f=$("#fruit");
				//$("li",$f);//$("#fruit li")
				$("#fruit").on("mouseover","li",function(){
					$(this).css({"font-size":"40px","color":"red"});
				}).on("mouseout","li",function(){
					$(this).css({"font-size":"18px","color":"black"});
				});
				/* $("#fruit li").mouseover(function(){
					$(this).css({"font-size":"40px","color":"red"});
				}).mouseout(function(){
					$(this).css("font-size","18px").css("color","black");
				}); */
				$("#add").click(function(){
					var n=window.prompt("新水果名称");
					var nli=$("<li>"+n+"</li>");
					//$f.append(nli);
					$f.prepend(nli);
				});
				$("#clear").click(function(){
					$("#fruit li:last").remove();
				});
				$("[type=button][value=克隆]").click(function(){
					var f=$("#fruit").clone(true);
					$(document.body).append(f);
				});
			});
		</script>
	</head>
	<body>
		<ul id="fruit">
			<li>桃子</li>
			<li>梨子</li>
			<li>杏子</li>
		 

		</ul>
		<input type="button" value="增加新水果" id="add"/>
		
		<input type="button" value="删除" id="clear"/>
		
		<input type="button" value="克隆" id="c"/>
	</body>
</html>
